
<template>
  <Account>
    <template v-slot:header>
      <NavBar :title="$t('account.record')" />
    </template>
    <div class="record">
      <div class="record_tabs l-f">
        <div
          @click="onChangeTab(index)"
          class="record_tabs_item"
          v-for="(item, index) in tabsList"
          :key="index"
        >
          <a-button
            :type="currentTab === index ? 'primary' : 'default'"
            class="record_tabs_item_btn"
            >{{ item }}</a-button
          >
        </div>
      </div>
      <div class="record_content">
        <!-- AI 交易 -->
        <template v-if="currentTab === 0">
          <a-tabs @change="towTabChange" class="record_content_tabs">
            <a-tab-pane key="0" :tab="$t('account.inProgress')">
              <div class="record_content_scroll">
                <NoData
                  v-if="listData.length === 0 && isLoadEnd"
                  :title="$t('account.oops')"
                  :desc="$t('account.oopsDesc')"
                />
                <template v-else>
                  <TransactionItem v-for="item in listData" :key="item.id" :options="item" />
                </template>
              </div>
            </a-tab-pane>
            <a-tab-pane key="1" :tab="$t('account.completed')">
              <div class="record_content_scroll">
                <NoData
                  v-if="listData.length === 0 && isLoadEnd"
                  :title="$t('account.oops')"
                  :desc="$t('account.oopsDesc')"
                />
                <template v-else>
                  <TransactionItem v-for="item in listData" :key="item.id" :options="item" />
                </template>
              </div>
            </a-tab-pane>
          </a-tabs>
        </template>
        <!-- 期权 -->
        <template v-if="currentTab === 1">
          <div class="record_content_scroll-max">
            <NoData
              v-if="listData.length === 0 && isLoadEnd"
              :title="$t('account.oops')"
              :desc="$t('account.oopsDesc')"
            />
            <template v-else>
              <OptionsItem
                v-for="item in listData"
                :key="item.id"
                :options="item"
              />
            </template>
          </div>
        </template>
        <!-- 合约 -->
        <template v-if="currentTab === 2">
          <a-tabs @change="towTabChange" class="record_content_tabs">
            <a-tab-pane key="0" :tab="$t('account.positions')">
              <div class="record_content_scroll">
                  <NoData
                    v-if="listData.length === 0 && isLoadEnd"
                    :title="$t('account.oops')"
                    :desc="$t('account.oopsDesc')"
                  />
                  <template v-else>
                    <ContractItem
                      v-for="item in listData"
                      :key="item.id"
                      :options="item"
                      :type="0"
                      @close="getListData"
                    />
                  </template>
              </div>
            </a-tab-pane>
            <a-tab-pane key="1" :tab="$t('account.openOrders')">
              <div class="record_content_scroll">
                 <NoData
                    v-if="listData.length === 0 && isLoadEnd"
                    :title="$t('account.oops')"
                    :desc="$t('account.oopsDesc')"
                  />
                  <template v-else>
                    <ContractItem
                      v-for="item in listData"
                      :key="item.id"
                      :options="item"
                      :type="1"
                      @close="getListData"
                    />
                  </template>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" :tab="$t('account.closedOrders')">
              <div class="record_content_scroll">
                 <NoData
                    v-if="listData.length === 0 && isLoadEnd"
                    :title="$t('account.oops')"
                    :desc="$t('account.oopsDesc')"
                  />
                  <template v-else>
                    <ContractItem
                      v-for="item in listData"
                      :key="item.id"
                      :options="item"
                      :type="2"
                      @close="getListData"
                    />
                  </template>
              </div>
            </a-tab-pane>
            <a-tab-pane key="3" :tab="$t('account.canceled')">
              <div class="record_content_scroll">
                 <NoData
                    v-if="listData.length === 0 && isLoadEnd"
                    :title="$t('account.oops')"
                    :desc="$t('account.oopsDesc')"
                  />
                  <template v-else>
                    <ContractItem
                      v-for="item in listData"
                      :key="item.id"
                      :options="item"
                      :type="3"
                      @close="getListData"
                    />
                  </template>
              </div>
            </a-tab-pane>
          </a-tabs>
        </template>
        <!-- 存款 -->
        <template v-if="currentTab === 3">
          <div class="record_content_scroll-max">
            <NoData
              v-if="listData.length === 0 && isLoadEnd"
              :title="$t('account.oops')"
              :desc="$t('account.oopsDesc')"
            />
            <template v-else>
              <DepositItem
                v-for="item in listData"
                :key="item.id"
                :options="item"
              />
            </template>
          </div>
        </template>
        <!-- 提现 -->
        <template v-if="currentTab === 4">
          <div class="record_content_scroll-max">
             <NoData
              v-if="listData.length === 0 && isLoadEnd"
              :title="$t('account.oops')"
              :desc="$t('account.oopsDesc')"
            />
            <template v-else>
              <WithdrawItem
                v-for="item in listData"
                :key="item.id"
                :options="item"
              />
            </template>
          </div>
        </template>
      </div>
    </div>
  </Account>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";

import {
  getLegalHistoryListApi,
  getSecondsOrderListApi,
  getLockOrderListApi,
  getContractOrderListApi
} from "@/api/tradeApi.js";

import {
  getRechargeListApi,
  getWithdrawListApi
} from '@/api/userApi.js'

import NoData from "@/components/noData/index.vue";
import Account from "@/views/account/index.vue";
import NavBar from "@/components/navBar/index.vue";
import TransactionItem from "./components/transaction-item/index.vue";
import OptionsItem from "./components/options-item/index.vue";
import ContractItem from "./components/contract-item/index.vue";
import DepositItem from "./components/deposit-item/index.vue";
import WithdrawItem from "./components/withdraw-item/index.vue";
import { COIN } from "@/common";

const { t } = useI18n();
const route = useRoute();

const currentTab = ref(0);
const currentTowTab = ref(0);
const listData = ref([]);
const isLoadEnd = ref(false);

onMounted(() => {
  if (route.params && route.params.index) {
    currentTab.value = Number(route.params.index);
  }
  getListData();
});

const tabsList = computed(() => {
  return [
    t("account.aiTransaction"),
    t("account.options"),
    t("account.contract"),
    t("account.deposit"),
    t("account.withdraw"),
  ];
});

// 一级导航栏切换事件
const onChangeTab = (index) => {
  currentTab.value = index;
  getListData();
};

// 二级导航切换事件
const towTabChange = (index) => {
  currentTowTab.value = Number(index)
  getListData();
};

// 列表请求事件
const getListData = () => {
  listData.value = [];
  isLoadEnd.value = false;
  switch (currentTab.value) {
    case 0:
      getLockOrderList();
      break;
    case 1:
      getSecondsOrderList();
      break;
    case 2:
      getContractOrderList()
      break
    case 3:
      getRechargeList()
      break
    case 4:
      getWithdrawList()
      break
  }
};

// 获取锁仓订单
const getLockOrderList = async () => {
  let status = 0;
  switch (currentTowTab.value) {
    case 0:
      status = 0;
      break;
    case 1:
      status = 1;
      break;
  }
  const res = await getLockOrderListApi({
    page: 1,
    limit: 9999,
    status
  });
  listData.value = res;
  isLoadEnd.value = true;
};

// 获取秒合约订单
const getSecondsOrderList = async () => {
  const res = await getSecondsOrderListApi({
    currency_id: COIN.id,
    page: 1,
    limit: 9999,
  });
  listData.value = res.list.data;
  isLoadEnd.value = true;
};

// 获取合约订单
const getContractOrderList = async() => {
   let status = 1;
  switch (currentTowTab.value) {
    case 0:
      status = 1;
      break;
    case 1:
      status = 99;
      break;
    case 2:
      status = 3;
      break;
    case 3:
      status = 4;
      break;
  }
  const res = await getContractOrderListApi({
    status: status,
    page: 1,
    limit: 9999
  })
  listData.value = res.data
  isLoadEnd.value = true;
}

// 获取充值记录
const getRechargeList = async () => {
  const res = await getRechargeListApi({
    page: 1,
    limit: 9999
  })
  listData.value = res.data;
  isLoadEnd.value = true;
}

// 获取提现记录
const getWithdrawList = async () => {
  const res = await getWithdrawListApi({
    page: 1,
    limit: 9999
  })
  listData.value = res;
  isLoadEnd.value = true;
}


// 资金历史记录
const getLegalHistoryList = async () => {
  let type = 4;
  switch (currentTab.value) {
    case 0:
      type = 4;
      break;
    case 1:
      type = 3;
      break;
    case 2:
      type = 2;
      break;
    case 3:
      break;
    case 3:
      break;
  }
  const res = await getLegalHistoryListApi({
    type,
    limit: 9999,
  });
  console.log(res);
};
</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>